<template>
    <div class="bg page-home">
        <div class="banner">
        	<swiper :options="bannerOption" class="swiper-box">
			    <swiper-slide v-for="item in banners" class="swiper-item">
			    	<router-link to="/getpassword">
			    		<img :src="item" />
			    	</router-link>
			    </swiper-slide>
			    <div class="swiper-pagination" slot="pagination"></div>
			</swiper>
        </div>
        
        <div class="business">
        	<ul class="clearFix">
        		<li key="index" v-for="(item,index) in business">
        			<router-link :to="{name:item.link||'ServeDetail',query: {id: item.id,name: item.name}}">
	        			<div><img :src="item.icon"/></div>
	        			<p>{{item.name}}</p>
	        		</router-link>
        		</li>
        	</ul>
        </div>
        
        <div class="cases">
        	<h2>服务案例</h2>
        	<div>
        		<ul class="clearFix">
	        		<li v-for="(item,index) in cases" key="index">
	        			<img :alt="item.name" :src="item.imgUrl"/>
	        			<p>{{item.name}}</p>
	        		</li>
	        	</ul>
        	</div>
        </div>
        
        <div class="friend">
        	<h2>合作伙伴</h2>
        	<div class="friend-cont">
        		<swiper :options="friendOption" class="swiper-box">
				    <swiper-slide key="index" v-for="(list,index) in friends" class="swiper-item">
				    	<ul class="clearFix">
			        		<li key="cindex" v-for="(item,cindex) in list"><img :alt="item.name" :src="item.imgUrl"/></li>
			        	</ul>
				    </swiper-slide>
				    <div class="swiper-pagination" slot="pagination"></div>
				</swiper>
        	</div>
        </div>
    </div>
</template>

<script>

	import http from '../services/http';
	import { mapState } from 'vuex';
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	
    export default {
    	name:'index',
        data() {
	      return {
	      	
	      }
	    },
	    computed: {
		    ...mapState({
		      bannerOption:state => state.home.bannerOption,
		      friendOption:state => state.home.friendOption,
		      banners:state => state.home.banners,
		      friends:state => state.home.friends,
		      cases:state => state.home.cases,
		      business:state => state.home.business,
		    })
		},
	    props:{
    		toast:{
    			type: Function,
    			required: true
    		},
    		homeSelect:{
    			type: Function,
    			required: true
    		},
    	},
	    created() {
        	this.$store.dispatch({ type: 'getBanner' });
        	this.$store.dispatch({ type: 'getBusiness' });
        	this.$store.dispatch({ type: 'getPartner' });
	    	if(this.$route.query.homeSelect){
		  		this.homeSelect(this.$route.query.homeSelect);
			}
	    },
		components: {
		    swiper,
		    swiperSlide
		}
    };
	
	
	 
	
</script>

<style lang="scss">
.page-home {
	background: #f5f5f5;
	
	.banner {
		width: 100%;
		height: auto;
		position: relative;
		.imgs {
			width: 100%;
			li {
				&:nth-of-type(1) {
					position: relative;
				}
				position: absolute;
				width: 100%;
				height: auto;
				left: 0;
				top: 0;
				z-index: 10;
				transition: opacity .2s ease-in-out;
				opacity: 0;
				&.active {
					z-index: 20;
					opacity: 1;
				}
			}
		}
		img {
			width: 100%;
			height: auto;
			float: left;
		}
	}
	
	.business {
		padding: 10px 0 20px;
		margin-bottom: 10px;
		background: #ffffff;
		ul li {
			padding-top: 10px;
			float: left;
			width: 25%;
			
			a{display: block;}
			
			div {
				height: 45px;
				text-align: center;
				background: transparent no-repeat center / 45px 45px;
				
				img{
					height: 45px;
					width: 45px;
				}
			}
			p {
				color: #666666;
				font-size: .812rem;
				line-height: 20px;
				padding: 5px 0;
				text-align: center;
			}
		}
	}
	
	.cases {
		padding: 10px 15px;
		width: 100%;
		height: auto;
		background: #ffffff;
		margin-bottom: 10px;
		h2 {
			font-size: 1.125rem;
			font-weight: 700;
			color: #222222;
			text-align: left;
			padding: 10px 0;
			margin-bottom: 10px;
		}
		div {
			width: 100%;
			overflow-x: auto;
			padding-bottom: 5px;
		}
		ul {
			white-space: nowrap;
			li {
				display: inline-block;
				margin-right: 5px;
				img {
					height: 90px;
					width: auto;
				}
				p {
					padding: 5px;
					line-height: 20px;
					color: #666666;
					text-align: left;
				}
			}
		}
	}
	
	.friend {
		padding: 10px 15px;
		width: 100%;
		height: auto;
		background: #ffffff;
		position: relative;
		h2 {
			font-size: 1.125rem;
			font-weight: 700;
			color: #222222;
			text-align: left;
			padding: 10px 0;
			margin-bottom: 10px;
		}
	}
	
	.friend-cont {
		width: 100%;
		height: 250px;
		.swiper-item {
			align-items: baseline;
		}
	}
	
	.friend .swiper-item {
		ul {
			width: 100%;
		}
		li {
			float: left;
			width: 33.3%;
			height: 60px;
			text-align: center;
			img{
			    max-width: 100%;
    			max-height: 100%;
			}
		}
	}

}

#test-imgs img {
	height: 150px;
}

.swiper-box {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background: #ffffff;
}

.swiper-item {
	height: 100%;
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

body .banner .swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	.swiper-pagination-bullet {
		float: left;
		height: 5px;
		width: 5px;
		border-radius: 50%;
		background: #ffffff;
		margin: 0;
		margin-right: 5px;
		opacity: 0.6;
		&.swiper-pagination-bullet-active {
			background: #ffffff;
			opacity: 1;
		}
	}
}

body .friend-cont .swiper-pagination {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	.swiper-pagination-bullet {
		float: left;
		height: 6px;
		width: 6px;
		border-radius: 50%;
		background: #c1c1c1;
		margin: 0;
		margin-right: 7px;
		opacity: 0.6;
		&.swiper-pagination-bullet-active {
			background: #2dbe60;
			opacity: 1;
		}
	}
}
</style>
